<template>
  <div class="grou-title" v-bind="$attrs">
    <span v-bind="iconOptions" class="icon">{{ props.icon }}</span>
    <slot></slot>
  </div>
</template>
<script setup>
  import { reactive, toRefs, ref, getCurrentInstance } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    icon: {
      type: String,
      default: '┃',
    },
    iconOptions: {
      type: Object,
      default: () => {},
    },
  })
</script>
<style lang="scss" scoped>
  // 分组标题
  .grou-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
    .icon {
      padding-right: 0.3em;
    }
  }
</style>
